<template>
	<u-popup 
		:show="isShow" 
		mode="bottom" 
		round="16" 
		safe-area-inset-bottom 
		@close="close">
		<view class="sizebox">
			<view class="title flex align-center justify-between">
				查看规格(规格/库存)
				<view class="total">共{{ totalStocks }}个</view>
			</view>
			<view class="cates" style="height: 50vh;overflow: auto;">
				<u-scroll-list v-if="newArr.length" :indicator="detail.sku_spec.length > 3">
					<view class="scroll-list">
						<view class="flex align-center btn-item">
							<view
								:style="{width: width / 5 + 'px'}"
								class="btnbox">
								<u-button 
									shape="circle" 
									:custom-style="btnStyle">封面</u-button>
							</view>
							<view
								v-for="(item, index) in detail.sku_spec" 
								:key="index" 
								:style="{width: width / 5 + 'px'}"
								class="btnbox">
								<u-button 
									shape="circle" 
									:custom-style="btnStyle">{{ item.title }}</u-button>
							</view>
							<view 
								class="btnbox"
								:style="{width: width / 5 + 'px'}">
								<u-button
									shape="circle"
									:custom-style="btnStyle">库存(个)</u-button>
							</view>
						</view>
						<view 
							v-for="(item, index) in newArr" 
							:key="index" 
							class="flex align-center btn-item">
							<view :style="{width: width / 5 + 'px'}" class="btnImage">
								<image class="skuImage" :src="item.image" mode="aspectFill" @click="preview(index, 'sku')"></image>
							</view>
							<view 
								v-for="(_item, _index) in item.child" 
								:key="_index"
								:style="{width: width / 5 + 'px'}"
								class="btnbox">
								<u-button 
									shape="circle"
									:custom-style="btnStyle">{{ _item.title }}</u-button>
							</view>
							<view 
								class="btnbox"
								:style="{width: width / 5 + 'px'}">
								<u-button
									shape="circle"
									:custom-style="btnStyle">{{ item.stock || '--' }}</u-button>
							</view>
						</view>
					</view>
				</u-scroll-list>
				<view v-else style="margin-top: 60rpx;">
					<u-empty
					    mode="data"
					    icon="/static/icons/icon_data.png"
						text="还没有规格"
					>
					</u-empty>
				</view>
			</view>
		</view>
		<view v-if="newArr.length" class="action">
			<u-button class="btn" plain type="success" @click="onCopy">复制</u-button>
		</view>
	</u-popup>
</template>
<script>
	import { getGoodsDetail } from '@/api/common'
	export default {
		props: {
			show: Boolean,
			detailId: [Number, String]
		},
		data() {
			return {
				width: 0,
				newArr: [],
				detail: {},
				totalStocks: 0,
				btnStyle: {
					border: 0,
					padding: 0,
					fontSize: '28rpx',
				}
			}
		},
		computed: {
			isShow: {
				get() {
					return this.show
				},
				set(newV) {
					// console.log(newV)
				}
			}
		},
		mounted() {
			this.width = uni.getSystemInfoSync().screenWidth
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				getGoodsDetail({
					id: this.detailId
				}).then(res => {
					this.detail = res
					console.log(res)
					
					let arr = []
					this.detail.sku_spec.forEach(item => {
						arr.push(item.sku_value)
					})
					let arr1 = this.combineArrays(arr)
					let arr2 = []
					arr1.forEach((item, index) => {
						let ids = []
						// if (Array.isArray(item)) {
						// }
						item.forEach(_item => {
							ids.push(_item.id)
						})
						const str = ids.sort((a, b) => a - b).join(',')
						// const i = this.detail.sku.findIndex(sku => str.indexOf(sku.sku_id) > -1)
						const i = this.detail.sku.findIndex(sku => sku.sku_id == str)
						if (i > -1) {
							arr2.push({
								id: ids.join(','),
								stock: this.detail.sku[i].stocks,
								child: item,
								image: this.detail.sku[i].image || '/static/icon-empty.png'
							})
						}
					})
					// console.log(arr2)
					this.newArr = arr2
					
					let stocks = 0
					this.detail.sku.forEach(item => {
						stocks += Number(item.stocks)
					})
					this.totalStocks = stocks
				}).finally(() => {
					this.skeletonLoading = false
					uni.stopPullDownRefresh()
				})
			},
			combineArrays(arrays) {
			  if (arrays.length === 0) {
			    return []
			  } else if (arrays.length === 1) {
			    return arrays[0]
			  } else {
			    const result = []
			    const first = arrays[0]
			    const rest = arrays.slice(1)
			    for (let i = 0; i < first.length; i++) {
			      const remainingCombinations = this.combineArrays(rest)
			      for (let j = 0; j < remainingCombinations.length; j++) {
			        result.push([first[i]].concat(remainingCombinations[j]))
			      }
			    }
			    return result
			  }
			},
			onCopy() {
				if (!this.newArr.length) return
				let html = ''
				this.newArr.forEach(item => {
					item.child.forEach(_item => {
						html += `${_item.title}-`
					})
					html += `${item.stock}个\n`
				})
				uni.setClipboardData({
					data: html,
					success(res) {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail(err) {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				})
			},
			preview(index, type) {
				let current = this.newArr[index].image
				if (current.indexOf('/static/') > -1) return
				let urls = this.newArr.map(item => item.image)
				uni.previewImage({
					current,
					urls
				})
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>
<style lang="scss" scoped>
.sizebox {
	.title {
		font-size: 32rpx;
		padding: 30rpx;
	}
	.tag {
		margin: 0 30rpx 30rpx 0;
	}
	.total {
		color: $uni-color-error;
		font-size: 30rpx;
		font-weight: 700;
	}
}
.cates {
	.title {
		font-size: 30rpx;
		font-weight: 600;
	}
	.item {
		&-title {
			margin: 20rpx 0 0;
		}
		&-sku {
			margin: 20rpx 20rpx 0 0;
		}
	}
}
.btnImage {
	text-align: center;
}
.skuImage {
	width: 60rpx;
	height: 60rpx;
	border-radius: 6rpx;
}
.action {
	padding: 30rpx;
}
</style>
